<template>
    <div class="content" @scroll=scrolls()>
        <ul class="c_left">
            <li class="change"><p class="change_bg">正在流行</p></li>
            <li v-for="(n,index) in data" @click=Bclicks()><p>{{n.title}}</p></li>
        </ul>
        <div class="c_rightbox">
            <div class="c_r">
                <div class=" c_right">
                    <!--上半部分-->
                    <ul class="r_top" id="r_top">
                        <li v-for="n in data">
                            <a href="#"><img :src="n.p1" alt=""><p>{{n.t1}}</p></a>
                            <a href="#"><img :src="n.p2" alt=""><p>{{n.t2}}</p></a>
                            <a href="#"><img :src="n.p3" alt=""><p>{{n.t3}}</p></a>
                        </li>
                    </ul>
                    <div class="r_bottom" id="r_bottom">
                        <ul class="uls" @click="Sclicks()">
                            <li><a href="#" class="change">综合</a></li>
                            <li><a href="#">销量</a></li>
                            <li><a href="#">新品</a></li>
                        </ul>
                        <ul class="list">
                            <li>
                                <div class="li_l">
                                    <img src="../../assets/img/icon_tu111.webp" alt="">
                                    <p class="meng">已售2706件</p>
                                    <img src="../../assets/img/icon_1.png" alt="" class="jian">
                                    <p class="miaoshu">2017年冬季新款韩版毛呢</p>
                                    <div class="cang">
                                        <span>￥399</span>
                                        <a href="#">1444<img src="../../assets/img/star.png" alt=""></a>
                                    </div>
                                </div>
                                <div class="li_r">
                                    <img src="../../assets/img/icon_tu222.webp" alt="">
                                    <p class="meng">已售54件</p>
                                    <img src="../../assets/img/icon_2.png" alt="" class="jian">
                                    <p class="miaoshu">2017年冬季新款韩版毛呢</p>
                                    <div class="cang">
                                        <span>￥399</span>
                                        <a href="#">1444<img src="../../assets/img/star.png" alt=""></a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="li_l">
                                    <img src="../../assets/img/icon_tu111.webp" alt="">
                                    <p class="meng">已售2706件</p>
                                    <img src="../../assets/img/icon_1.png" alt="" class="jian">
                                    <p class="miaoshu">2017年冬季新款韩版毛呢</p>
                                    <div class="cang">
                                        <span>￥399</span>
                                        <a href="#">1444<img src="../../assets/img/star.png" alt=""></a>
                                    </div>
                                </div>
                                <div class="li_r">
                                    <img src="../../assets/img/icon_tu222.webp" alt="">
                                    <p class="meng">已售54件</p>
                                    <img src="../../assets/img/icon_2.png" alt="" class="jian">
                                    <p class="miaoshu">2017年冬季新款韩版毛呢</p>
                                    <div class="cang">
                                        <span>￥399</span>
                                        <a href="#">1444<img src="../../assets/img/star.png" alt=""></a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="li_l">
                                    <img src="../../assets/img/icon_tu111.webp" alt="">
                                    <p class="meng">已售2706件</p>
                                    <img src="../../assets/img/icon_1.png" alt="" class="jian">
                                    <p class="miaoshu">2017年冬季新款韩版毛呢</p>
                                    <div class="cang">
                                        <span>￥399</span>
                                        <a href="#">1444<img src="../../assets/img/star.png" alt=""></a>
                                    </div>
                                </div>
                                <div class="li_r">
                                    <img src="../../assets/img/icon_tu222.webp" alt="">
                                    <p class="meng">已售54件</p>
                                    <img src="../../assets/img/icon_2.png" alt="" class="jian">
                                    <p class="miaoshu">2017年冬季新款韩版毛呢</p>
                                    <div class="cang">
                                        <span>￥399</span>
                                        <a href="#">1444<img src="../../assets/img/star.png" alt=""></a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        props:["data"],
        methods:{
//            顶部悬浮
            scrolls:function(){
                $(".content").scroll(function(){
                     scroll=$(".content").scrollTop();
                    var maxscrolltop=document.getElementById("r_top").offsetHeight;
                    if(scroll>=maxscrolltop) {
                        $(".uls").css({"position": "absolute","top":"45px","right":"6px","width":"71%","background-color":"white","z-index":"999"});
                    }else if(scroll<=maxscrolltop){
                        $(".uls").css({"position":"static","display":"flex","width":"100%"});
                    }
                })
            },
//            点击事件
            Bclicks:function(){
                $(".c_left li").each(function(){
                    $(this).click(function(){
                        $(this).siblings("li").removeClass('change');
                        $(this).siblings().children("p").removeClass("change_bg");
                        $(this).addClass("change");
                        $(this).children("p").addClass("change_bg");
                    })
                })
            },
            Sclicks:function(){
                $(".uls li").each(function(){
                    $(this).click(function(){
                        $(this).siblings("li").children("a").removeClass("change");
                        $(this).children("a").addClass("change");
                    })
                })
            }
        }
    }
</script>
<style scoped>
    /*content*/
    .content{
        width:100%;
        flex: 1;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .c_left{
        width: 1rem;
        height:550px;
        overflow-y: scroll;
        position: fixed;
        background-color:#F6F6F6;
        z-index: 20;
        font-size:0.15rem;
    }
    .c_left li{
        padding: 0.1rem 0.1rem 0.1rem 0;
        width:0.9rem;
    }
    .c_left p{
        padding-left:0.1rem;
        text-align: center;
    }
    /*改变的li*/
    .change_bg{
        border-left: solid #FF5577 4px;
        font-weight: bold;
        color:#FF7D96;
    }
    .change{
        background: white;
    }
    /*右边*/
    .c_rightbox{
        width:auto;
        padding-left:1rem;
    }
    .c_r{
        background:white;
    }
    .c_right{
        padding-top: 0.3rem ;
    }
    .r_top{
        display:flex;
        flex-direction: column;
        margin-right: 0.1rem;
        margin-left:0.1rem;
        border-bottom: solid #E5E5E5 1px;
    }
    .r_top>li{
        width:100%;
        display: flex;
        padding-bottom:0.2rem;
    }
    .r_top>a{
        width:33%;
        margin: 0.2rem 0;
    }
    .r_top>li>a>img{
        margin-left:10%;
        width:80%;
        height: 65%;
        border:1px solid #FEFEFE;
    }
    .r_top>li>a>p{
        text-align: center;
        font-size:0.13rem;
        margin-top:0.15rem;
        color: #666666;
    }
    .r_bottom{
        display:flex;
        flex-direction: column;
        /*position: relative;*/
    }
    .uls{
        display: flex;
    }
    .uls li{
        width:33%;
        font-size:0.15rem;
        text-align: center;
        padding:0.1rem 0;
    }
    .uls a{
        display: block;
        border-left: 1px solid #e6e6e6;
        font-size: 0.14rem;
        color: #333;
    }
    .uls .change{
        color: #ef4562;
    }
    /*图片*/
    .list{
        border-top: solid #E5E5E5 1px;
    }
    .list>li{
        margin-top:0.1rem;
        display: flex;
        margin-left:2%;
        margin-right:2%;
    }
    .li_l{
        width:49%;
        margin-right:1%;
        position: relative;
        border-radius: 2%;
    }
    .li_l>img{
        width:100%;
        border-radius: 2%;
    }
    .li_r{
        width:49%;
        margin-left:1%;
        position: relative;
        border-radius: 2%;
    }
    .li_r>img{
        width:100%;
        border-radius: 2%;
    }
    .meng{
        position: absolute;
        font-size:0.1rem;
        color: #fff;
        top:1.35rem;
        left:0;
        padding:0.05rem 0.05rem 0.05rem 0;
        background: rgba(0,0,0,.5);
        text-indent: 0.1rem;
    }
    .list .jian{
        position: absolute;
        width:0.3rem;
        top:0;
    }
    .miaoshu{
        width:100%;
        margin-top:0.1rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size:0.12rem;
    }
    .cang{
        display: flex;
        justify-content: space-between;
        margin-top:0.1rem;
        font-size: 0.1rem;
    }
    .cang>span{
        font-size:0.18rem;
        display: block;
        float: left;
        color: #FF5777;
    }
    .cang>a{
        display: flex;
        color: #999;
        line-height:0.24rem;
        margin-right:0.1rem;
    }
    .cang>a>img{
        width: 0.13rem;
        height:0.13rem;
        margin-top: 0.05rem;
        margin-left: 0.05rem;
    }
</style>